<script setup lang="ts">
import {onMounted, ref} from "vue";
import EcNavBar from "../components/ec-nav-bar.vue";
import 'animate.css';
import EcBulletScreen from "../components/ec-bullet-screen.vue";
import HomeQuizShortcut from "../components/home/home-quiz-shortcut.vue";
import HomeQuizList from "../components/home/home-quiz-list.vue";
import HomeProfile from "../components/home/home-profile.vue";
import HomeAbout from "../components/home/home-about.vue";

const welcomeEle = ref<HTMLDivElement>(null)
const showWelcome = ref(true)

function handleScroll() {
  if (welcomeEle.value.getBoundingClientRect().bottom <= 0) {
    showWelcome.value = false
    window.removeEventListener('scroll', handleScroll, true)
  }
}

onMounted(() => {
  window.addEventListener("scroll", handleScroll, true)
})
</script>

<template>
  <!--欢迎页面-->
  <div v-if="showWelcome"
       class="welcome fixed w-full h-screen
        flex flex-col justify-center items-center bg-blue-500">
    <!--文字图标-->
    <div class="flex flex-col items-end w-auto h-auto">
      <img class="w-48 tablet:w-64 laptop:w-96 h-auto" src="../assets/Essue.png" alt="logo">
      <img class="w-1/4" src="../assets/一休.png" alt="title">
    </div>
  </div>
  <div class="relative h-screen scroll-snap overflow-y-scroll">
    <!--欢迎页占位-->
    <div v-if="showWelcome" ref="welcomeEle" class="fake-welcome h-screen scroll-snap-align"></div>
    <!-- 弹幕 -->
    <ec-bullet-screen class="scroll-snap-align w-full h-40"
                      :class="{'bg-blue-500':!showWelcome}"/>
    <!--首页-->
    <div class="main scroll-snap-align relative h-screen bg-gray-100">
      <!--导航栏-->
      <ec-nav-bar class="sticky top-0 w-full h-16 z-10 bg-blue-700 text-gray-50"/>
      <!--板块小容器-->
      <div class="container max-w-screen-laptop mx-auto grid grid-cols-12 gap-8 pt-8">
        <div class="col-span-8 flex flex-col gap-8">
          <home-quiz-shortcut class="card"/>
          <home-quiz-list class="card"/>
        </div>
        <div class="col-span-4 flex flex-col gap-8">
          <home-profile class="card"/>
          <home-about class="card"/>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.scroll-snap {
  scroll-snap-type: y proximity;
}

.scroll-snap-align {
  scroll-snap-align: start;
}

.card {
  @apply p-4 bg-white rounded-xl;
  box-shadow: #D1D5DB 10px 10px;
}
</style>